<template>
  <div class="select">
    <el-radio-group v-model="type" size="large" @change="changePie">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销售额</el-radio-button>
    </el-radio-group>
    <el-select
      v-model="day"
      class="m-2"
      placeholder="Select"
      size="large"
      @change="changePie"
    >
      <el-option label="昨天" value="yesterday" />
      <el-option label="今天" value="today" />
      <el-option label="前3天" value="three_days" />
      <el-option label="前7天" value="seven_days" />
      <el-option label="前14天" value="fourteen_days" />
      <el-option label="前1个月" value="thirty_days" />
      <el-option label="前2个月" value="sixty_days" />
    </el-select>
  </div>
  <div>
    <div id="example" style="height: 300px; width: 100%"></div>
    <hr />
    <div id="map" style="height: 600px; width: 100%"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { getIndexApi } from "./api/api";
import china from "@/json/china.json";
const type = ref<"sale_" | "_money">("sale_");
type EChartsOption = echarts.EChartsOption;
let pieData: SalePie[] = [];
let mapData: SaleMap[] = [];
var option: EChartsOption;
var myChart: echarts.ECharts;
type daySelect =
  | "yesterday"
  | "today"
  | "three_days"
  | "thirty_days"
  | "sixty_days"
  | "seven_days"
  | "fourteen_days";
const day = ref<daySelect>("yesterday");
const changePie = () => {
  const key =
    type.value === "sale_" ? type.value + day.value : day.value + type.value;
  const data = pieData.map((item) => ({
    name: item.name,
    value: item[key],
  }));
  (option.series as echarts.SeriesOption[])[0].data = data;
  myChart.setOption(option);
};
const drawMap = () => {
  var mapDom = document.getElementById("map")!;
  var mapChart = echarts.init(mapDom);
  const data = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));
  echarts.registerMap("china", china as any);
  mapData;
  mapChart.setOption({
    title: {
      text: "全国销量分布图",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>销量：{c}",
    },

    visualMap: {
      min: 0,
      max: 850000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["yellowgreen", "yellow", "orange", "red"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        data,
        zoom: 1.2,
      },
    ],
  });
};
onMounted(() => {
  var chartDom = document.getElementById("example")!;
  myChart = echarts.init(chartDom);
  getIndexApi().then((res) => {
    pieData = res.data.salePie;
    mapData = res.data.saleMap;
    const data: any[] = pieData.map((item) => ({
      name: item.name,
      value: item.sale_yesterday,
    }));
    option = {
      // 鼠标移入时的提示信息
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,.6)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{b}:{c}({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "right",
        height: 100,
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    option && myChart.setOption(option);
    drawMap();
  });
});
</script>

<style lang="less" scoped>
.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.el-input__wrapper){
  width: 100px;
}
</style>
